<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>
    <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="/static/bootstrap/css/bootstrap-theme.css" rel="stylesheet">
    <link href="/static/jquery_ui/jquery-ui.min.css" rel="stylesheet">
    <link href="/static/iziModal/iziModal.min.css" rel="stylesheet">
    <link href="/static/keyboard/css/keyboard.min.css" rel="stylesheet">
</head>
<body class="container">
<div class="page-header">
    <h1>用户登录
        <small>User Log In</small>
    </h1>
</div>
<div class="row">
    <div class="col-sm-12">
        <form class="form-horizontal" role="form">
            {% csrf_token %}
            <div class="form-group">
                <label for="id_user" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="id_user" placeholder="用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="id_password" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="id_password" placeholder="密码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-2">
                    <button id="id_submit" class="btn btn-default" type="button">登录</button>
                </div>
            </div>
        </form>
    </div>
</div>
<div id="notify"></div>
</body>
<footer>@2018 星宇工务</footer>
</html>
<script src="/static/jquery/jquery-3.3.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.js"></script>
<script src="/static/jquery_ui/jquery-ui.min.js"></script>
<script src="/static/iziModal/iziModal.min.js"></script>
<script src="/static/keyboard/js/jquery.keyboard.js"></script>
<script>
    $(document).ready(function () {
        let notify = $("#notify");
        notify.iziModal({
            padding: 20,
            headerColor: '#4eb98c',
            timeout: 3000,
            title: '信息'
        });
        // csrf
        let csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
        console.log('csrf:' + csrftoken);

        function csrfSafeMethod(method) {
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }

        $.ajaxSetup({
            beforeSend: function (xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            }
        });
        $("#id_submit").click(function (evt) {
            evt.preventDefault();
            $.post('/login/',
                {
                    "user": $("#id_user").val(),
                    "password": $("#id_password").val()
                },
                function (data) {
                    if (data.success === true) {
                        // 跳转
                        $(location).attr("href", "/");
                    } else {
                        $("#notify .iziModal-content").html('用户名/密码 错误，未授权访问');
                        notify.iziModal('open');
                    }
                });
        });

        // virtual keyboard
        $('input').keyboard({
            layout: 'qwerty',
            usePreview: true,
            restrictInput: true,
            useCombos: false,
            autoAccept: false,
        });

    });
</script>